@charset "utf-8";
@import "common/reset";
@function r($px){
    @return $px/100+rem;
}
html , body{
    height: 100%;
}
.web{
    .section1{
        background-image: url(../img/bjt.png);
        background-size: cover;
        .logo{
            width: r(103);
            height: r(38);
            position: absolute;
            left: r(45);
            top: 0;
            img{
                width: 100%;
            }
        }
        .ren{
            width: r(339);
            height: r(421);
            position: absolute;
            left: r(162);
            bottom: r(146);
            animation-name: ren;
            animation-duration: 3s;
            animation-timing-function: cubic-bezier(.22,1.62,.51,.81);
            img{
                width: 100%;
            }
        }
        .kaishi{
            width: r(171);
            height: r(70);
            position: absolute;
            left: 50%;
            bottom: r(60);
            transform: translateX(-50%);
            img{
                width: 100%;
            }
        }
        .yueliang{
            width: r(222);
            position: absolute;
            right: r(71);
            bottom: r(465);
            font-size: 0;
            height: r(222);
            background-image: url(../img/gaoguang.png);
            background-repeat: no-repeat;
            background-size: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .yueliang_img{
                width: r(65);
                height: r(65);
                img{
                    width: 100%;
                }
            }
        }
        .bt1{
            width: r(381);
            height: r(71);
            position: absolute;
            left: r(126);
            top: r(128);
            img{
                width: 100%;
            }
        }
        .bt2{
            width: r(576);
            height: r(157);
            position: absolute;
            top: r(217);
            left: r(24);
            img{
                width: 100%;
            }
        }
        .bt3{
            width: r(352);
            height: r(62);
            position: absolute;
            left: r(148);
            top: r(320);
            img{
                width: 100%;
            }
        }
        .bt4{
            width: r(341);
            height: r(29);
            position: absolute;
            left: r(154);
            top: r(355);
            img{
                width: 100%;
            }
        }
        .qipao1{
            width: r(128);
            height: r(78);
            position: absolute;
            left: r(55);
            bottom: r(158);
            animation-name: qipao;
            animation-duration: 3s;
            animation-delay: 3s;
            img{
                width: 100%;
            }
        }
        .qipao2{
            width: r(94);
            height: r(57);
            position: absolute;
            right: r(50);
            bottom: r(200);
            animation-name: qipao;
            animation-duration: 3s;
            animation-delay: 3.5s;
            img{
                width: 100%;
            }
        }
        .qipao3{
            width: r(148);
            height: r(82);
            position: absolute;
            right: r(45);
            bottom: r(398);
            animation-name: qipao;
            animation-duration: 3s;
            animation-delay: 2s;
            img{
                width: 100%;
            }
        }
        .qipao4{
            width: r(94);
            height: r(69);
            position: absolute;
            left: r(49);
            bottom: r(421);
            animation-name: qipao;
            animation-duration: 3s;
            animation-delay: 2.5s;
            img{
                width: 100%;
            }
        }
        .top{
            z-index: 20;
        }
        .yun1{
            width: r(77);
            height: r(56);
            position: absolute;
            left: r(41);
            top: r(351);
            animation-name: yundong;
            animation-duration: 50s;
            //动画无限循环
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        .yun2{
            width: r(43);
            height: r(32);
            position: absolute;
            right: r(139);
            top: r(495);
            animation-name: yundong1;
            animation-duration: 50s;
            //动画无限循环
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        .yun3{
            width: r(58);
            height: r(43);
            position: absolute;
            right: r(59);
            top: r(385);
            animation-name: yundong1;
            animation-duration: 50s;
            //动画无限循环
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        .yun4{
            width: r(59);
            height: r(44);
            position: absolute;
            right: r(47);
            top: r(560);
            animation-name: yundong1;
            animation-duration: 50s;
            //动画无限循环
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        .yun5{
            width: r(34);
            height: r(25);
            position: absolute;
            right: r(132);
            top: r(584);
            animation-name: yundong1;
            animation-duration: 50s;
            //动画无限循环
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        @keyframes ren{
            0%{
                bottom: 100%;
            }
            100%{
                bottom: r(146);
            }
        }
        @keyframes yundong{
            0%{
            }
            80%{
                opacity: 0;
            }
            90%{
                left: r(-90);
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes yundong1{
            0%{
            }
            80%{
                opacity: 0;
            }
            90%{
                right: 100%;
            }
            100%{
                opacity: 0;
            }
        }
        @keyframes qipao{
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(2);
            }
            100%{
                transform: scale(1);
            }
        }
    }
    .section2{
        background-image: url(../img/bj2_02.png);
        background-size: cover;
        position: relative;
        .se1{
            height: 100%;
            position: relative;
            p{
                color: white;
                font-size: r(30);
                position: absolute;
                top: r(100);
                left: r(50);
            }
            .problem{
                width: r(250);
                height: r(350);
                margin: r(-300) auto;
                img{
                    width: 100%;
                }
            }
            ul{
                position: absolute;
                left: r(59);
                bottom: r(117);
                li{
                    width: r(367);
                    height: r(63);
                    background-image: url(../img/hoon.png);
                    background-size: cover;
                    font-size: 0;
                    margin-top: r(30);
                    position: relative;
                    span{
                        font-size: r(6);
                        color: black;
                        position: absolute;
                        left: r(15);
                        top: r(10);
                    }
                }
                li:hover{
                    background-image: url(../img/yes.png);
                }
            }
            .kdg{
                width: r(83);
                height: r(92);
                position: absolute;
                left: r(500);
                bottom: r(80);
                z-index: 2;
                img{
                    width: 100%;
                }
            }
            .yf1{
                width: r(84);
                position: absolute;
                left: r(500);
                bottom: r(40);
                animation-name: yingfu;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                img{
                    width: 100%;
                }
            }        
            .yf2{
                width: r(84);
                position: absolute;
                left: r(500);
                bottom: r(40);
                animation-name: yingfu;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                animation-delay: 1s;
                img{
                    width: 100%;
                }
            }
            .yf3{
                width: r(84);
                position: absolute;
                left: r(500);
                bottom: r(40);
                animation-name: yingfu;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                animation-delay: 2s;
                img{
                    width: 100%;
                }
            }
            .yf4{
                width: r(84);
                position: absolute;
                left: r(500);
                bottom: r(40);
                animation-name: yingfu;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                animation-delay: 2.3s;
                img{
                    width: 100%;
                }
            }
            .yf5{
                width: r(84);
                position: absolute;
                left: r(500);
                bottom: r(40);
                animation-name: yingfu;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                animation-delay: 3.3s;
                img{
                    width: 100%;
                }
            }
            @keyframes yingfu{
            0%{
                opacity: 1;
            }
            90%{
                transform: scale(0.8);
                bottom: r(440);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        .dongyun{
            width: r(112);
            height: r(83);
            position: absolute;
            top: r(480);
            left: r(33);
            animation: dongyun1;
            animation-duration: 20s;
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        @keyframes dongyun1{
            0%{
                opacity: 1;
            }
            90%{
                left: r(-33);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        .dongyun2{
            width: r(64);
            height: r(47);
            position: absolute;
            top: r(480);
            left: r(451);
            animation: dongyun2;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            img{
                width: 100%;
            }
        }
        @keyframes dongyun2{
            0%{
                opacity: 1;
            }
            90%{
                left: r(51);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        .dongyun3{
            width: r(78);
            height: r(82);
            position: absolute;
            top: r(443);
            left: r(563);
            animation: dongyun3;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            z-index: -1;
            img{
                width: 100%;
            }
        }
        @keyframes dongyun3{
            0%{
                opacity: 1;
            }
            90%{
                left: r(163);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        }
        .se2{
            position: relative;
        }
        .se3{
            position: relative;
            .problem{
                width: r(400);
            }
        }
        .se4{
            position: relative;
            .problem{
                width: r(400);
                margin: r(-300) auto;
            }
        }
        .se5{
            position: relative;
            .problem{
                width: r(400);
                margin: r(-300) auto;
            }
        }
        .se6{
            span{
                margin-left: r(160);
            }
        }
        .zzc{
            position: relative;
            font-size: 0;
            .tijiao{
                overflow: hidden;
                width: 100%;
                height: 100%;
                .logo{
                    width: r(103);
                    height: r(38);
                    margin-left: r(45);
                    margin-top: r(45);
                    img{
                        width: 100%;
                    }
                }
                .tyg{
                    width: r(173);
                    height: r(173);
                    margin: r(75) auto 0;
                    img{
                        width: 100%;
                    }
                }
                .crcs{
                    color: white;
                    font-size: r(30);
                    text-align: center;
                    margin-top: r(10);
                    a{
                        color: yellow;
                    }
                }
                .qingmidu{
                    font-size: r(15);
                    color: #d5d5d5;
                    margin-left: r(40);
                    margin-top: r(90);
                }
                .hou00{
                    background-color: #d5d5d5;
                    width: r(167);
                    height: r(56);
                    border-radius: r(60);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    right: r(84);
                    bottom: r(513);
                    p{
                        font-size: r(22);
                    }
                }
                .hou70{
                    background-color: #5c717a;
                    width: r(132);
                    height: r(56);
                    border-radius: r(60);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    left: r(78);
                    bottom: r(455);
                    p{
                        font-size: r(22);
                    }
                }
                .hou90{
                    background-color: #a1b15f;
                    width: r(178);
                    height: r(56);
                    border-radius: r(60);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    left: r(222);
                    bottom: r(427);
                    p{
                        font-size: r(22);
                    }
                }
                .hou95{
                    background-color: #c3c126;
                    width: r(190);
                    height: r(56);
                    border-radius: r(60);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    left: r(389);
                    bottom: r(377);
                    p{
                        font-size: r(22);
                    }
                }
                .pingjia{
                    font-size: r(16);
                    text-align: center;
                    letter-spacing: r(4);
                    color: white;
                    margin-top: r(250);
                }
                .pj{
                    width: r(485);
                    height: r(60);
                    background-color:  transparent;
                    border: r(1) solid white;
                    position: absolute;
                    left: 50%;
                    transform: translatex(-50%);
                    color: white;
                    font-size: r(26);
                }
                .tan{
                    width: 100%;
                    display: flex;
                    div{
                        width: r(142);
                        height: r(51);
                        background-size: cover;
                        p{
                            text-align: center;
                            font-size: r(25);
                            margin-top: r(6);
                        }
                    }
                    .tan_right{
                        position: absolute;
                        background-image: url(../img/bjs.png);
                        left: r(343);
                        bottom: r(149);
                    }
                    .tan-left{
                        position: absolute;
                        background-image: url(../img/tjq.png);
                        left: r(151);
                        bottom: r(149);
                    }
                    .tan-left:hover{
                        background-image: url(../img/tjh.png);
                    }
                }
            }
            .fp-tableCell{
                display: block;
            }
            .zz{
                display: block;
                width: 100%;
                height: 100%;
                z-index: 50;
                background-color: rgba(25,25,25,0.9);
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
                .zz_img{
                    width: r(168);
                    height: r(166);
                    margin: r(284) auto 0;
                    img{
                        width: 100%
                    }
                }
                .haoyou{
                    text-align: center;
                    margin-top: r(30);
                    font-size: r(32);
                    color: white;
                }
            }
            #yingcang{
                display: none;
            }
            #yingcang:checked ~ .zz{
                display: none;
            }
        }
        .rbq{
            position: relative;
            font-size: 0;
            .tijiao{
                overflow: hidden;
                width: 100%;
                height: 100%;
                .logo{
                    width: r(103);
                    height: r(38);
                    margin-left: r(45);
                    margin-top: r(45);
                    img{
                        width: 100%;
                    }
                }
                .tyg{
                    width: r(173);
                    height: r(173);
                    margin: r(75) auto 0;
                    img{
                        width: 100%;
                    }
                }
                .sanjiao{
                    width: 0;
                    height: 0;
                    margin: 0 auto;
                    border-bottom: r(10) solid #75b9ff;
                    border-top: r(10) solid transparent;
                    border-left: r(10) solid transparent;
                    border-right: r(10) solid transparent;
                }
                .pingjia1{
                    width: r(397);
                    margin: 0 auto;
                    height: r(53);
                    background-color: #75b9ff;
                    border-radius: r(20);
                    overflow: hidden ;  
                    p{
                        font-size: r(25);
                        color: white;
                        margin-left: r(15);
                        margin-top: r(15);
                    }
                }
                .pingjia2{
                    font-size: r(25);
                    color: white;
                    text-align: center;
                    margin-top: r(10);
                }
                .haoyoupingjia{
                    display: flex;
                    margin-left: r(90);
                    margin-top: r(20);
                    .touxiang{
                        width: r(59);
                        height: r(59);
                        img{
                            width: 100%;
                        }
                    }
                    .wenzhi{
                        width: r(402);
                        height: r(44);
                        margin-left: r(10);
                        background-image: url(../img/wenzhi.png);
                        background-size: cover;
                        p{
                            font-size: r(25);
                            color: white;
                            margin-left: r(15);
                            margin-top: r(5);
                        }
                    }
                }
                .dibu{
                    width: 100%;
                    position: absolute;
                    height: r(70);
                    background-color: #2c2c2c;
                    bottom: 0;
                    display: flex;
                    p{
                        color: white;
                        font-size: r(25);
                        margin-top: r(15);
                        margin-left: r(15);
                    }
                    .quguanzhu{
                        width: r(111);
                        height: r(47);
                        margin-top: r(10);
                        margin-left: r(10);
                        img{
                            width: 100%;
                        }
                    }
                    .caidan{
                        width: r(36);
                        height: r(28);
                        margin-left: r(30);
                        margin-top: r(20);
                        img{
                            width: 100%;
                        }
                    }
                }
            }
            .user{
                display: block;
                width: 100%;
                height: 100%;
                z-index: 50;
                background-color: rgba(25,25,25,0.9);
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
                .user_img{
                    width: r(314);
                    height: r(314);
                    margin: r(365) auto 0;
                    img{
                        width: 100%
                    }
                }
                .haoyou{
                    text-align: center;
                    margin-top: r(30);
                    font-size: r(32);
                    color: white;
                }
            }
            #username{
                display: none;
            }
            #username:checked ~ .user{
                display: none;
            }
        
        }
        .lest{
            position: relative;
            font-size: 0;
            .tijiao{
                overflow: hidden;
                width: 100%;
                position: relative;
                height: 100%;
                .logo{
                    width: r(103);
                    height: r(38);
                    margin-left: r(45);
                    margin-top: r(45);
                    img{
                        width: 100%;
                    }
                }
                .lest_bgimg{
                    width: r(534);
                    position: relative;
                    height: r(846);
                    margin: r(50) auto 0;
                    background-image: url(../img/endimg.png);
                    background-size: cover;
                    .lest_bgimg_t1{
                        font-size: r(56);
                        color: yellow;
                        text-align: center;
                        padding-top: r(30);
                        display: block;
                    }
                    .lest_bgimg_t2{
                        font-size: r(40);
                        color: white;
                        text-align: center;
                        padding-top: r(15);
                    }
                    .lest_bgimg_t3{
                        font-size: r(40);
                        color: white;
                        text-align: center;
                        padding-top: r(15);
                    }
                    .lest_bgimg_t4{
                        font-size: r(40);
                        color: white;
                        text-align: center;
                        padding-top: r(15);
                        a{
                            color: #36ff00;
                        }
                    }
                    .lest_bgimg_t5{
                        font-size: r(40);
                        color: white;
                        text-align: center;
                        padding-top: r(15);
                    }
                    .woyaofengxiang{
                        width: r(200);
                        position: absolute;
                        right: r(60);
                        bottom: r(80);
                        height: r(71);
                        img{
                            width: 100%;
                        }
                    }
                }
                .shabi{
                    width: r(260);
                    height: r(333);
                    position: absolute;
                    bottom: r(57);
                    left: r(101);
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
}